<template>
  <div class="delivery-check-form">

    <a-form :model="form" layout="inline" @submit="handleSubmit">
      <a-form-item label="客户ID">
        <a-input disabled v-model="form.clientId" />
      </a-form-item>
      <a-form-item label="客户名">
        <a-input style="width: 400px;" disabled v-model="form.clientName" />
      </a-form-item>
      <a-form-item label="送货单ID">
        <a-input style="width: 110px;" v-model="form.deliveryNumber" disabled />
      </a-form-item>
      <a-form-item label="送货单号">
        <a-input v-model="form.deliveryNumber" />
      </a-form-item>
      <a-form-item label="送货日期">
        <a-date-picker style="width: 150px;" :value="moment(typeof(form.deliveryDate) == 'string' ? form.deliveryDate : '2020-01-26', 'YYYY-MM-DD')" :format="'YYYY-MM-DD'" @change="onDateChange"/>
      </a-form-item>
      <a-form-item label="客户电话">
        <a-input v-model="form.clientPhone" />
      </a-form-item>
      <a-form-item label="客户地址">
        <a-input style="width: 400px;" v-model="form.deliveryAddress" />
      </a-form-item>
      <a-form-item label="货币">
        <a-input style="width: 110px;" v-model="form.currency" />
      </a-form-item>
      <a-form-item label="审核人">
        <a-input v-model="form.reviewer" />
      </a-form-item>
      <a-form-item label="车牌号">
        <a-input style="width: 150px;" v-model="form.plateNumber" />
      </a-form-item>

      <a-form-item class="operation">
        <a-button type="primary" html-type="submit">
          修改
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
const moment = window.moment;

import {
  deliveryUpdateReq
} from '@/requests/deliveryRequests.js';

import {
  dateNumFormat
} from '@/utils/commonFunc';

export default {
  name: "DeliveryCheckForm",
  props: {
    delivery: {
      type: Object,
      default: () => {
        return {
          clientId: '',
          clientName: '',
          deliveryNumber: '',
          deliveryDate: null,
          clientPhone: '',
          deliveryAddress: '',
          currency: '',
          reviewer: '',
          plateNumber: ''
        };
      }
    }
  },
  data() {
    return {
      form: this.delivery
    };
  },
  computed: {

  },
  mounted() {
  },
  watch: {
    'delivery' () {
      this.form = Object.assign({}, this.delivery);
      this.form.deliveryDate = dateNumFormat(this.form.deliveryDate);
    },
  },
  methods: {
    moment,
    onDateChange(date, dateString) {
      this.form.deliveryDate = dateString;
    },
    handleSubmit(e) {
      e.preventDefault();
      if (this.$route.params.id !== undefined && this.$route.name == 'DeliveryCheck') {
        const id = this.$route.params.id;
        const data = Object.assign({}, this.form);
        const deleteList = ['clientId', 'clientName', 'id', 'reviewed', 'totalAmount', 'orderQuantity'];
        deleteList.forEach((value) => {
          delete data[value];
        })
        // 将日期转化为数字
        data.deliveryDate = parseInt(data.deliveryDate.toString().split('-').join(''));

        const loaded = this.$message.loading('正在修改送货单数据，请勿重复提交', 0);
        deliveryUpdateReq(id, data).then((res) => {
          loaded();
          // 如果成功，应当得到一个delivery
          const delivery = res.data;

          // 弹出修改客户信息成功的提示框
          this.$notification['success']({
            message: '修改送货单信息',
            description:
              `修改送货单信息成功，送货单ID ${id}`,
          });

          this.$store.commit('updateDeliveriesCache');
        }).catch((err) => {
          loaded();
          this.$notification['error']({
            message: '修改送货单',
            description:
              `修改送货单失败，错误提示 ${err.response.data.message}`,
          });
        });
      }
    }
  },
  components: {

  },
};
</script>

<style scoped lang="scss">
.delivery-check-form {
  form {
    display: flex;
    flex-wrap: wrap;
  }
  .operation {
    display: flex;
    flex: 1;
    justify-content: flex-end;
  }
}

</style>
<style lang="scss">
.delivery-check-form {
  .ant-form-item-label {
    width: 75px;
  }
}
</style>